<template>
  <div class="">
    <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
      <el-form ref="form" :rules="rules" :model="form" label-width="80px">
        <el-form-item label="素材选择" prop="material">
          <el-select v-model="form.material" placeholder="请选择" v-loadmore:test="moreMaterial">
            <el-option v-for="item in list" :key="item.id" :label="item.url" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作选择" prop="operation">
          <el-select v-model="form.operation" multiple filterable allow-create default-first-option placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="sure('form')">立即创建</el-button>
        </el-form-item>
      </el-form>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure()">确 定</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>

<script>
import { governList } from '@/api/newMeterial'
export default {
  data() {
    return {
      centerDialogVisible: false,
      list: [],
      form: {
        material: '',
        operation: '',
      },
      options: [{
        value: 'safety_analysis',
        label: '安全风险分析'
      }, {
        value: 'clear_err',
        label: '清理异常值和错误'
      }, {
        value: 'format_conversion',
        label: '数据格式转换'
      }, {
        value: 'missing_value',
        label: '标记处理缺失值'
      }, {
        value: 'duplicate_value',
        label: '清除重复记录'
      }, {
        value: 'arrange',
        label: '归类整理'
      }],
      rules: {
        material: [
          { required: true, message: '请选择素材', trigger: 'blur' },
        ],
        operation: [
          { required: true, message: '请选择操作', trigger: 'blur' },
        ]
      },
      pageParams: {
        pageNumber: 0, // 第几页
        pageSize: 10, // 每页多少条
        total: 0
      },
    }
  },
  components: {

  },
  computed: {

  },
  watch: {

  },
  methods: {
    sure(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$message({
            message: '已进入数据清洗队列，详情请操作完成后查看清洗报告',
            type: 'success'
          });
          this.centerDialogVisible = false
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    moreMaterial() {
      // console.log(1213)
      this.throttle(this.getMorelist(this.pageParams), 200)
    },
    throttle(func, delay) {
      let lastCall = 0;
      return (...args) => {
        const now = new Date().getTime();
        console.log(args)
        if (now - lastCall < delay) {
          console.log(now - lastCall < delay)
          return;
        }
        lastCall = now;
        return func.apply(this, args);
      };

    },
    async getMorelist(params) {
      this.pageParams.pageNumber++
      const { data } = await governList(params)
      for (let index = 0; index < data.list.length; index++) {
        let filterArry = this.list.filter((item) => {
          return item.id == data.list[index].id
        })
        if (filterArry.length == 0) {
          this.list.push(data.list[index])
        }
      }
    },
    async getList(params) {
      const { data } = await governList(params)
      this.list = data.list // 赋值数据
      this.pageParams.total = data.total
      // 针对每一行数据添加一个编辑标记
      this.list.forEach(item => {
        const keys = Object.keys(item)
        const editObject = {}
        // item.isEdit = false // 添加一个属性 初始值为false
        // 数据响应式的问题  数据变化 视图更新
        // 添加的动态属性 不具备响应式特点
        // this.$set(目标对象, 属性名称, 初始值) 可以针对目标对象 添加的属性 添加响应式
        this.$set(item, 'isEdit', false)

        for (let k of keys) {
          editObject[k] = item[k]
        }
        this.$set(item, 'editRow', editObject)
      })
    },
  },
  created() {
    this.getList(this.pageParams)
  },
  mounted() {

  },
}
</script>

<style scoped></style>
